<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>用户信息管理</title>  
    <script>  
        // 假设这是从服务器获取的用户信息（用于编辑模式）  
        var userInfo = {  
            id: 1, // 假设的用户ID，用于编辑时区分不同用户  
            username: 'JohnDoe',  
            email: 'johndoe@example.com',  
            password: 'password123' // 注意：在真实应用中，密码不应明文显示  
        };  
  
        // 切换表单模式（新增/修改）  
        function toggleFormMode(isEditMode) {  
            var form = document.getElementById('userInfoForm');  
            var userIdInput = document.getElementById('userId');  
            var submitBtn = document.getElementById('submitBtn');  
  
            if (isEditMode) {  
                // 显示用户ID（如果是编辑模式）  
                userIdInput.value = userInfo.id;  
                userIdInput.readOnly = true; // 用户ID只读  
                submitBtn.value = '保存修改';  
            } else {  
                // 隐藏用户ID（如果是新增模式）  
                userIdInput.value = '';  
                userIdInput.readOnly = false; // 用户ID可编辑（尽管通常不需要）  
                submitBtn.value = '新增用户';  
                // 清空其他表单字段（如果需要）  
                document.getElementById('username').value = '';  
                document.getElementById('email').value = '';  
                document.getElementById('password').value = '';  
            }  
        }  
  
        // 页面加载时，假设是编辑模式（你可以根据实际需求调整）  
        window.onload = function() {  
            toggleFormMode(true); // 初始化为编辑模式  
        };  
  
        // 提交表单前的处理（这里只是示例，你需要根据实际情况处理）  
        function handleFormSubmit(event) {  
            event.preventDefault(); // 阻止表单的默认提交行为  
            var form = event.target;  
            var action = form.action; // 获取表单的action属性（提交到的URL）  
            var method = form.method; // 获取表单的method属性（提交方式，如POST）  
            var formData = new FormData(form); // 创建一个FormData对象来收集表单数据  
  
            // 在这里，你可以使用Ajax或其他方式将formData发送到服务器  
            // ...  
  
            // 为了演示，我们只是打印出表单数据  
            console.log('Submitting form data:', formData);  
  
            // 如果需要重置表单，可以在这里添加代码  
            // form.reset();  
        }  
    </script>  
</head>  
<body>  
    <h1>用户信息管理</h1>  
  
    <form id="userInfoForm" onsubmit="handleFormSubmit(event)" action="save-user.jsp" method="post">  
        <input type="hidden" id="userId" name="userId"> <!-- 用户ID，用于编辑时区分用户 -->  
  
<<<<<<< HEAD
        <label for="username">用户名:</label>  
        <input type="text" id="username" name="username" required>  
=======
    try {  
        Class.forName("org.mariadb.jdbc.Driver");  
        connection = DriverManager.getConnection("jdbc:mariadb://10.220.140.102:3366/studb14","stu14", "jyw745DJ");  
>>>>>>> branch 'master' of https://gitee.com/gkyee/ordering-mini-program.git
  
        <label for="email">邮箱:</label>  
        <input type="email" id="email" name="email" required>  
  
        <label for="password">密码:</label>  
        <input type="password" id="password" name="password" required>  
  
        <input type="submit" id="submitBtn" value="保存修改">  
    </form>  
  
    <!-- 你可以在这里添加切换新增/修改模式的按钮或其他控制元素 -->  
    <button onclick="toggleFormMode(false)">新增用户</button>  
    <button onclick="toggleFormMode(true)" disabled>编辑用户</button> <!-- 初始时禁用，因为假设页面加载时是编辑模式 -->  
  
    <!-- 注意：在真实应用中，你可能需要动态生成这些按钮或根据当前状态显示/隐藏它们 -->  
</body>  
</html>